import { useState, useEffect } from 'react';
import { List, Tag, Tabs, Spin, Empty, message } from 'antd';
import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
import api from '../utils/api';

export default function Transactions() {
  const [loading, setLoading] = useState(true);
  const [transactions, setTransactions] = useState([]);
  const [activeTab, setActiveTab] = useState('all');
  const user = JSON.parse(localStorage.getItem('user') || '{}');

  useEffect(() => {
    fetchTransactions();
  }, [activeTab]);

  const fetchTransactions = async () => {
    setLoading(true);
    try {
      const params = activeTab === 'all' ? {} : { type: activeTab };
      const res = await api.get(`/transactions/user/${user.id}`, { params });
      if (res.success) {
        setTransactions(res.data.transactions);
      }
    } catch (error) {
      message.error('加载失败');
    } finally {
      setLoading(false);
    }
  };

  const items = [
    { key: 'all', label: '全部' },
    { key: 'recharge', label: '充值' },
    { key: 'consumption', label: '消费' }
  ];

  return (
    <div style={{ padding: '20px 0' }}>
      <h2 style={{
        color: '#d4af37',
        fontSize: 24,
        fontWeight: 600,
        padding: '0 20px 16px',
        margin: 0
      }}>
        交易记录
      </h2>

      <Tabs
        activeKey={activeTab}
        onChange={setActiveTab}
        items={items}
        style={{
          padding: '0 20px',
          color: '#fff'
        }}
      />

      {loading ? (
        <div style={{ textAlign: 'center', padding: '50px 0' }}>
          <Spin size="large" />
        </div>
      ) : transactions.length === 0 ? (
        <Empty description="暂无交易记录" style={{ padding: '50px 0' }} />
      ) : (
        <List
          dataSource={transactions}
          renderItem={(item) => (
            <List.Item
              style={{
                padding: '16px 20px',
                background: 'rgba(0, 0, 0, 0.3)',
                marginBottom: 8,
                borderLeft: `4px solid ${item.type === 'recharge' ? '#52c41a' : '#ff4d4f'}`
              }}
            >
              <List.Item.Meta
                avatar={
                  item.type === 'recharge' ? (
                    <ArrowDownOutlined style={{ fontSize: 28, color: '#52c41a' }} />
                  ) : (
                    <ArrowUpOutlined style={{ fontSize: 28, color: '#ff4d4f' }} />
                  )
                }
                title={
                  <div style={{ color: '#fff', fontSize: 16, fontWeight: 600 }}>
                    {item.type === 'recharge' ? '账户充值' : '消费支出'}
                  </div>
                }
                description={
                  <div>
                    <div style={{ color: 'rgba(255, 255, 255, 0.7)', marginTop: 4 }}>
                      {dayjs(item.created_at).format('YYYY-MM-DD HH:mm:ss')}
                    </div>
                    {item.remark && (
                      <div style={{ color: 'rgba(255, 255, 255, 0.5)', marginTop: 4, fontSize: 12 }}>
                        {item.remark}
                      </div>
                    )}
                  </div>
                }
              />
              <div style={{ textAlign: 'right' }}>
                <div style={{
                  fontSize: 22,
                  fontWeight: 'bold',
                  color: item.type === 'recharge' ? '#52c41a' : '#ff4d4f',
                  marginBottom: 4
                }}>
                  {item.type === 'recharge' ? '+' : '-'}¥{item.amount}
                </div>
                <Tag color={item.type === 'recharge' ? 'success' : 'error'}>
                  {item.type === 'recharge' ? '收入' : '支出'}
                </Tag>
              </div>
            </List.Item>
          )}
        />
      )}
    </div>
  );
}
